<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>radial gradient</title>
    <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.min.css">
</head>

<body>

    <div class="container">
        <h1>径向渐变 radialGradient</h1>
    </div>

    <div class="container">
        <svg width="640" height="500" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <radialGradient id="RadialGradient1">
                    <stop offset="0%" stop-color="deeppink" />
                    <stop offset="100%" stop-color="grey" />
                </radialGradient>
                <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
                    <stop offset="0%" stop-color="deeppink" />
                    <stop offset="100%" stop-color="grey" />
                </radialGradient>
            </defs>

            <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)" />
            <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)" />
        </svg>
    </div>

</body>

</html>